<!--
 * @Author: yangfeixiang 842931716@qq.com
 * @Date: 2022-09-26 18:03:26
 * @LastEditors: yangfeixiang 842931716@qq.com
 * @LastEditTime: 2022-09-27 14:05:14
 * @FilePath: \wework\wework\src\pages\wework\marketingplan\components\implement.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div>
      <span>选择日期：</span>
      <el-date-picker
        v-model="value2"
        type="daterange"
        unlink-panels
        range-separator="To"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :shortcuts="shortcuts"
        :size="size"
      />
    </div>
    <div class="top-label">
      <div class="label-list">
        <div style="font-size: 24px;">0</div>
        <div>任务总数<el-icon><QuestionFilled /></el-icon></div>
      </div>
      <div class="label-list">
        <div style="font-size: 24px;">0</div>
        <div>已完成任务总数<el-icon><QuestionFilled /></el-icon></div>
      </div>
      <div class="label-list">
        <div style="font-size: 24px;">0</div>
        <div>未完成任务总数<el-icon><QuestionFilled /></el-icon></div>
      </div>
      <div class="label-lists">
        <div style="font-size: 24px;">——</div>
        <div>任务完成率<el-icon><QuestionFilled /></el-icon></div>
      </div>
    </div>
    <div style="margin-top: 20px;">
      <div>
        <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
          <el-radio-button label="规则详情"></el-radio-button>
          <el-radio-button label="成员详情"></el-radio-button>
        </el-radio-group>
      </div>
      <div>
        <div style="display: inline-block;">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="选择日期">
              <el-date-picker
                v-model="value1"
                type="date"
                placeholder="Pick a day"
                :size="size"
              />
            </el-form-item>
            <el-form-item label="推送群聊">
              <el-select v-model="formInline.region" placeholder="Activity zone">
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div style="display: inline-block;float: right;">
          <el-button>重置</el-button>
          <el-button type="primary" plain>导出Excel</el-button>
        </div>
      </div>
    </div>
    <div v-if="tabPosition == '规则详情'">
      共1条规则
    </div>
    <div  v-if="tabPosition == '规则详情'">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="规则序号" width="180" />
        <el-table-column prop="name" label="规则名称" width="180" />
        <el-table-column prop="address" label="规则提醒时间" />
        <el-table-column prop="address" label="任务总数" />
        <el-table-column prop="address" label="已完成任务数" />
        <el-table-column prop="address" label="未完成任务数" />
        <el-table-column prop="address" label="完成率" />
        <el-table-column prop="address" label="操作" >
          <template #default="scope">
          <span style="color:#409EFF;cursor:pointer;" @click="task(scope.row)">任务详情</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="tabPosition == '成员详情'">
      共1个成员执行1个群聊
    </div>
    <div  v-if="tabPosition == '成员详情'">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="成员" width="180" />
        <el-table-column prop="name" label="执行群聊数" width="180" />
        <el-table-column prop="address" label="任务总数" />
        <el-table-column prop="address" label="已完成任务数" />
        <el-table-column prop="address" label="未完成任务数" />
        <el-table-column prop="address" label="任务完成率" />
        <el-table-column prop="address" label="操作" >
          <template #default="scope">
          <span style="color:#409EFF;cursor:pointer;" @click="member(scope.row)">任务详情</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog v-model="centerDialogVisible" title="任务详情" width="30%" center>
      <div>
        <span >规则名称：</span>
        <span>
          <el-select v-model="value" class="m-2" placeholder="Select" style="width: 80%;">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </span>
      </div>
      <div style="margin-top: 15px;">
        <div style="border:1px solid #eee">
          <div :class="isCollapse == 1 ? 'tablist tablistxuan' : 'tablist'" @click="xuanzhong(1)">任务总数</div>
          <div :class="isCollapse == 2 ? 'tablist tablistxuan' : 'tablist'" @click="xuanzhong(2)">已完成任务数</div>
          <div :class="isCollapse == 3 ? 'tablists tablistxuan' : 'tablists'" @click="xuanzhong(3)">未完成任务数</div>
        </div>
      </div>
      <div style="border: 1px solid #eee;margin-top:15px">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="群聊" width="180" />
          <el-table-column prop="name" label="群主" width="180" />
          <el-table-column prop="address" label="状态" />
          <el-table-column prop="address" label="推送时间" />
        </el-table>
      </div>
      <div style="margin-top: 10px;">
        <span>任务总数:0</span>
        <span style="margin-left: 7px;margin-right: 7px;">已完成任务数:0</span>
        <span style="margin-right: 7px;">未完成任务数:0</span>
        <span>完成率:0%</span>
      </div>
    <!-- <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false"
          >Confirm</el-button
        >
      </span>
    </template> -->
  </el-dialog>
  <el-dialog v-model="membershow" title="任务详情" width="40%" center>
      <div>
        <div>
          <span>群主：</span>
          <span><el-button><el-icon style="color:#AEC6E2"><UserFilled /></el-icon>刘鸿基</el-button></span>
          <div style="float: right;"><el-button type="primary" plain>导出Excel</el-button></div>
        </div>
       
      </div>
      <div style="border: 1px solid #eee;margin-top:15px">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="群聊"  />
          <el-table-column prop="name" label="任务总数"  />
          <el-table-column prop="address" label="已完成任务" />
          <el-table-column prop="address" label="未完成任务" />
          <el-table-column prop="address" label="任务完成率" />
          <el-table-column prop="address" label="操作" >
            <template #default="scope">
              <span style="color:#409EFF;cursor:pointer;" >推送详情</span>
              <span style="color:#409EFF;cursor:pointer;margin-left: 7px;" >群详情</span>
            </template>
            </el-table-column>
        </el-table>
      </div>
      <div style="margin-top: 10px;">
        <span>任务总数:0</span>
        <span style="margin-left: 7px;margin-right: 7px;">已完成任务数:0</span>
        <span style="margin-right: 7px;">未完成任务数:0</span>
        <span>完成率:0%</span>
      </div>
    <!-- <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false"
          >Confirm</el-button
        >
      </span>
    </template> -->
  </el-dialog>
  </div>
</template>
<script setup>
    import { ref,reactive } from "vue";
    const isCollapse=ref(1)
    const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
const xuanzhong=(val)=>{
  isCollapse.value=val
}
const member=(val)=>{
  membershow.value=true
}
const centerDialogVisible = ref(false)
const membershow = ref(false)
const tabPosition =ref('规则详情')
const formInline = reactive({
  user: '',
  region: '',
})
const task=()=>{
  centerDialogVisible.value=true
}
</script>
<style>
  .tablist{
    width: 33%;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-right: 1px solid #eee;
    cursor:pointer;
  }
  .tablistxuan{
    background-color: #1890FF;
    color:#fff
  }
  .tablists{
    width: 33%;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    text-align: center;
    /* border-right: 1px solid #eee; */
  }
.top-label{
  border: 1px solid #79bbff;
  padding: 20px 40px;
  background-color: #FBFDFF;
  margin-top: 15px;
  border-radius: 5px;
}
.label-list{
  width: 25%;
  height: 70px;
  display: inline-block;
  color: black;
  text-align: center;
  border-right: 1px solid #e9e9eb;
  /* line-height: 70px; */
}
.label-lists{
  width: 25%;
  height: 70px;
  display: inline-block;
  color: black;
  text-align: center;
}
</style>